import React, {useImperativeHandle, useRef, useState} from 'react';

// class Bpp extends React.Component {

//   state = {
//     msg: '你好世界'
//   }
//   render() {
//     return (<div>
//       {this.state.msg}
//     </div>)
//   }
// }

// 普通标签添加 ref 我们可以获取到当前标签
// 类组件设置 ref 我们父组件可以拿到所有东西
// 函数式组件设置 ref 我们可以自定义暴露给父组件内容

const Cpp = React.forwardRef((props, ref)=>{
  // useImperativeHandle 该 hooks 可以让我们使用 ref 的时候自定义暴露给父组件的内容
  useImperativeHandle(ref, ()=>{
    return {
      // return 出去的内容就是我们需要暴露出去的内容
      name:'小王',
      fn: setCount
    }
  })

  const [count, setCount] = useState(100)

  return (<div>
    你好世界 --- {count}
  </div>)
})

const App = () => {

  const inpRef = useRef(null)

  return (
    <div>
      {/* 如果将 ref 添加在 DOM 上，该 ref 可以找到当前元素 */}
      {/* <input type="text" ref={inpRef} /> */}
      {/* 如果将 ref 添加在类组件中，此时 ref 可以获取到类组件的实例，并且可以操作该实例 */}
      {/* <Bpp ref={inpRef} /> */}

      {/* 如果将 ref 添加在函数式组件中，默认会系统给出警告，告诉我们不能直接给函数式组件添加
          ref 属性，如果需要使用可以使用 React.forwardRef 进行设置
      */}
      <Cpp ref={inpRef} />

      <button onClick={()=>{
        console.log(inpRef.current);

        inpRef.current.fn(200)
      }}>获取 ref 的值</button>
    </div>
  );
};

export default App;
